<template>
  <div class="menu-debug">
    <h1>菜单数据调试页面</h1>
    
    <div class="debug-section">
      <h2>API测试</h2>
      <el-button type="primary" @click="testMenuAPI">测试菜单API</el-button>
      <el-button type="success" @click="testUserMenuAPI">测试用户菜单API</el-button>
    </div>

    <div class="debug-section">
      <h2>原始API响应</h2>
      <pre>{{ JSON.stringify(rawResponse, null, 2) }}</pre>
    </div>

    <div class="debug-section">
      <h2>处理后的菜单数据</h2>
      <pre>{{ JSON.stringify(processedMenus, null, 2) }}</pre>
    </div>

    <div class="debug-section">
      <h2>菜单树形结构</h2>
      <el-tree
        :data="menuTree"
        :props="treeProps"
        node-key="id"
        :expand-on-click-node="false"
        show-checkbox
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="menu-info">
            <el-tag size="mini" :type="data.status === 1 ? 'success' : 'danger'">
              {{ data.status === 1 ? '启用' : '禁用' }}
            </el-tag>
            <el-tag size="mini" v-if="data.hidden" type="warning">隐藏</el-tag>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { getSliderMenus } from '@/api/configApi'
import { menuListApi } from '@/api/roleApi'

export default {
  name: 'MenuDebug',
  data() {
    return {
      rawResponse: null,
      processedMenus: [],
      menuTree: [],
      treeProps: {
        children: 'children',
        label: 'menuName'
      }
    }
  },
  methods: {
    async testMenuAPI() {
      try {
        console.log('开始测试菜单API...')
        const response = await getSliderMenus()
        console.log('菜单API响应:', response)
        this.rawResponse = response
        
        // 处理菜单数据
        this.processMenus(response)
      } catch (error) {
        console.error('菜单API测试失败:', error)
        this.$message.error('菜单API测试失败: ' + error.message)
      }
    },

    async testUserMenuAPI() {
      try {
        console.log('开始测试用户菜单API...')
        const response = await menuListApi()
        console.log('用户菜单API响应:', response)
        this.rawResponse = response
        
        // 处理菜单数据
        this.processMenus(response)
      } catch (error) {
        console.error('用户菜单API测试失败:', error)
        this.$message.error('用户菜单API测试失败: ' + error.message)
      }
    },

    processMenus(response) {
      console.log('处理菜单数据...')
      console.log('响应类型:', typeof response)
      console.log('响应是否为数组:', Array.isArray(response))
      console.log('响应结构:', response)

      let menuData = []
      
      if (response && response.code === 200 && response.data && Array.isArray(response.data)) {
        console.log('使用 response.data')
        menuData = response.data
      } else if (Array.isArray(response)) {
        console.log('直接使用 response 数组')
        menuData = response
      } else {
        console.error('无法识别的响应格式:', response)
        this.$message.error('无法识别的响应格式')
        return
      }

      console.log('原始菜单数据:', menuData)
      
      // 过滤和转换菜单数据
      this.processedMenus = this.filterHiddenMenus(menuData)
      console.log('处理后的菜单数据:', this.processedMenus)
      
      // 构建树形结构
      this.buildMenuTree(this.processedMenus)
    },

    filterHiddenMenus(menus) {
      if (!Array.isArray(menus)) {
        return []
      }

      return menus
        .filter(menu => !menu.hidden && menu.status === 1) // 过滤掉隐藏和禁用的菜单
        .map(menu => {
          const filteredMenu = { 
            ...menu,
            id: menu.id,
            menuUrl: menu.menuUrl,
            menuName: menu.menuName,
            menuIcon: menu.menuIcon,
            orderNum: menu.orderNum,
            hidden: menu.hidden,
            status: menu.status,
            children: menu.children || []
          }
          
          if (menu.children && Array.isArray(menu.children)) {
            filteredMenu.children = this.filterHiddenMenus(menu.children)
          }
          
          return filteredMenu
        })
        .sort((a, b) => (a.orderNum || 0) - (b.orderNum || 0))
    },

    buildMenuTree(menus) {
      // 构建树形结构
      const menuMap = new Map()
      const rootMenus = []

      // 第一遍：创建所有菜单节点
      menus.forEach(menu => {
        menuMap.set(menu.id, { ...menu, children: [] })
      })

      // 第二遍：建立父子关系
      menus.forEach(menu => {
        if (menu.parentId === 0 || !menu.parentId) {
          // 根菜单
          rootMenus.push(menuMap.get(menu.id))
        } else {
          // 子菜单
          const parent = menuMap.get(menu.parentId)
          if (parent) {
            parent.children.push(menuMap.get(menu.id))
          }
        }
      })

      this.menuTree = rootMenus
      console.log('构建的菜单树:', this.menuTree)
    }
  },

  mounted() {
    // 页面加载时自动测试
    this.testMenuAPI()
  }
}
</script>

<style scoped>
.menu-debug {
  padding: 20px;
}

.debug-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.debug-section h2 {
  margin-top: 0;
  color: #409eff;
}

pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.menu-info {
  display: flex;
  gap: 5px;
}
</style>
